import { extendSchemas } from '@/components/cms/utils'
import type { ComponentsConfig, ComponentsConfigRaw } from '../../types'
import advsConfig from './base/advs'
import { titleBar, fixedVideo, moreVideoList, noticeBar, tabBar } from './simples'

const basePath = 'template.homeHottest'
const config: ComponentsConfig = {
  title: '顶部搜索栏组件设置',
  default: 'tabBar',
  components: extendSchemas<ComponentsConfigRaw>(
    {
      titleBar: titleBar({
        value: 2,
        max: 22,
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          logo: `${basePath}.content.titleBar.logo`,
          search: {
            border: {
              radius: `${basePath}.content.titleBar.search.border.radius`,
              width: `${basePath}.content.titleBar.search.border.width`,
              color: `${basePath}.content.titleBar.search.border.color`
            },
            color: `${basePath}.content.titleBar.search.color`,
            fill: `${basePath}.content.titleBar.search.fill`,
            placeholder: `${basePath}.content.titleBar.search.placeholder`,
            iconColor: `${basePath}.content.titleBar.search.iconColor`,
            align: `${basePath}.content.titleBar.search.align`
          },
          collection: {
            style: `${basePath}.content.titleBar.collection.style`
          }
        }
      }),
      tabBar: tabBar({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          background: `${basePath}.content.tabBar.background`,
          indicator: {
            show: `${basePath}.content.tabBar.indicator.show`,
            color: `${basePath}.content.tabBar.indicator.color`,
            height: `${basePath}.content.tabBar.indicator.height`
          },
          text: {
            color: `${basePath}.content.tabBar.text.color`,
            size: `${basePath}.content.tabBar.text.size`,
            selectedColor: `${basePath}.content.tabBar.text.selectedColor`,
            selectedSize: `${basePath}.content.tabBar.text.selectedSize`,
            letterSpacing: `${basePath}.content.tabBar.text.letterSpacing`,
            lineHeight: `${basePath}.content.tabBar.text.lineHeight`
          }
        }
      }),
      noticeBar: noticeBar({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          style: `${basePath}.content.noticeBar.style`,
          background: `${basePath}.content.noticeBar.background`,
          height: `${basePath}.content.noticeBar.height`,
          text: {
            color: `${basePath}.content.noticeBar.text.color`,
            size: `${basePath}.content.noticeBar.text.size`,
            letterSpacing: `${basePath}.content.noticeBar.text.letterSpacing`,
            lineHeight: `${basePath}.content.noticeBar.text.lineHeight`
          },
          duration: `${basePath}.content.noticeBar.duration`,
          iconStyle: `${basePath}.content.noticeBar.iconStyle`,
          closeStyle: `${basePath}.content.noticeBar.closeStyle`
        }
      }),
      fixedVideo: fixedVideo({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          background: `${basePath}.content.fixed.background`,
          title: {
            color: `${basePath}.content.fixed.title.color`,
            size: `${basePath}.content.fixed.title.size`,
            letterSpacing: `${basePath}.content.fixed.title.letterSpacing`,
            lineHeight: `${basePath}.content.fixed.title.lineHeight`
          },
          layout: {
            style: `${basePath}.content.fixed.layout.style`,
            limit: `${basePath}.content.fixed.layout.limit`
          }
        }
      }),
      moreVideoList: moreVideoList({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          background: `${basePath}.content.more.background`,
          title: {
            color: `${basePath}.content.more.title.color`,
            size: `${basePath}.content.more.title.size`,
            letterSpacing: `${basePath}.content.more.title.letterSpacing`,
            lineHeight: `${basePath}.content.more.title.lineHeight`
          },
          layout: {
            style: `${basePath}.content.more.layout.style`,
            limit: `${basePath}.content.more.layout.limit`
          }
        }
      })
    },
    advsConfig(['playerBeforeAdv', 'playerPauseAdv', 'dialogAdv', 'bottomFloatAdv'])
  )
}
export default config
